<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="100px" style="height:auto">
				<el-row>
					<el-col :span="6">
						<el-form-item label="商品名称" prop="productName">
							<el-input type="text" v-model="queryForm.productName" placeholder="请输入商品名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="商品编码" prop="productCode">
							<el-input type="text" v-model="queryForm.productCode" placeholder="请输入商品编码"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="SKU名称" prop="productSkuName">
							<el-input type="text" v-model="queryForm.productSkuName" placeholder="请输入SKU名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="SKU编码" prop="productSkuCode">
							<el-input type="text" v-model="queryForm.productSkuCode" placeholder="请输入SKU编码"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<el-form-item label="条形码" prop="productBarCode">
							<el-input type="text" v-model="queryForm.productBarCode" placeholder="请输入条形码"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="状态" prop="status">
							<el-select v-model="queryForm.status" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<el-option label="下架" value="0"></el-option>
								<el-option label="上架" value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="创建时间" prop="time">
							<el-date-picker
								v-model="time"
								type="datetimerange"
								:picker-options="pickerOptions"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="timestamp"
								align="right"
								:default-time="['00:00:00', '23:59:59']"
								style="width: 100%;"
							></el-date-picker>
						</el-form-item>
					</el-col>
					
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<!-- 列表部分 -->
		<template>
			<!-- 表格上方的按钮 -->
			<div class="table-header">
				<el-button type="primary" @click="batchOperateSkuUp()">批量上架</el-button>
				<el-button type="primary" @click="batchOperateSkuOff()">批量下架</el-button>
			</div>

			<!-- 表格 -->
			<!-- 表格统一用 带边框、条纹间隔 的样式 -->
			<el-table :data="tableData" stripe border style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="40" align="center"></el-table-column>
				<el-table-column type="index" fixed label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column prop="thumbImage" label="SKU缩略图" width="80" align="center">
					<template slot-scope="scope">
						<el-image style="width: 35px; height: 35px" :src="scope.row.thumbImage"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="productName" label="商品名称"></el-table-column>
				<el-table-column prop="productCode" label="商品编码"></el-table-column>
				
				<el-table-column prop="skuName" label="SKU名称"></el-table-column>
				<el-table-column prop="productSkuCode" label="SKU编码"></el-table-column>
				<el-table-column prop="productBarCode" label="条形码"></el-table-column>
				
				<el-table-column prop="pricePurchase" label="参考进货价(元)" width="100" align="center"></el-table-column>
				<el-table-column prop="priceShow" label="原价(元)" width="100" align="center"></el-table-column>
				<el-table-column prop="price" label="销售价(元)" width="100" align="center"></el-table-column>
				<el-table-column prop="memberPrice" label="会员价(元)" width="100" align="center"></el-table-column>
				<el-table-column prop="couponAmount" label="券抵扣金额(元)" width="100" align="center"></el-table-column>
				
				<el-table-column prop="status" label="状态" width="80" align="center">
					<template slot-scope="scope">
						<el-tag :type="scope.row.status === 1 ? 'primary' : 'success'"
							disable-transitions>{{scope.row.status==0?"下架":"上架"}}</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column prop="createTime" label="创建时间" width="95" :formatter="forDateCreate"></el-table-column>
				<el-table-column prop="reviseTime" label="修改时间" width="95" :formatter="forDateRevise"></el-table-column>
				
				<el-table-column label="操作" fixed="right" width="220">
					<template slot-scope="scope">
						<el-button type="warning" v-if="scope.row.status==0" size="small" @click.native.prevent="operateSkuStatus(scope.$index, scope.row, 1)">上架</el-button>
						<el-button type="warning" v-if="scope.row.status==1" size="small" @click.native.prevent="operateSkuStatus(scope.$index, scope.row, 0)">下架</el-button>
						<el-button type="primary" size="small" @click="updatePage(scope.row.productId)">编辑</el-button>
						<el-button type="danger" size="small" @click.native.prevent="deleteRow(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>

		<!-- 翻页 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>
	</d2-container>
</template>

<script>
	import { findAllSkuListByPage, operateSkuStatus, batchOperateSkuStatus, delSku } from '@api/product/productSku'
	import dayjs from 'dayjs'
	export default {
		name: 'productInfoSku-skuList',
		data() {
			return {
				queryForm: {
					productName: '',
					productCode: '',
					productSkuName: '',
					productSkuCode: '',
					productBarCode: '',
					status: '',
					createTimeBegin: '',
					createTimeEnd: ''
				},
				time: [],
				pickerOptions: {
					shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
								picker.$emit('pick', [start, end])
							}
						}
					]
				},
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				multipleSelection: [],
			}
		},
		methods: {
			fetchData() {
				this.loading = true
				this.queryForm.createTimeBegin = this.time[0] == null ? '' : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss');
				this.queryForm.createTimeEnd = this.time[1] == null ? '' : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss');
				
				findAllSkuListByPage({
					productName: this.queryForm.productName,
					productCode: this.queryForm.productCode,
					productSkuName: this.queryForm.productSkuName,
					productSkuCode: this.queryForm.productSkuCode,
					productBarCode: this.queryForm.productBarCode,
					status: this.queryForm.status,
					createTimeBegin: this.queryForm.createTimeBegin,
					createTimeEnd: this.queryForm.createTimeEnd,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
						this.loading = false;
					}).catch(err => {
						console.log('err', err);
						this.loading = false;
					})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.fetchData();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.fetchData();
			},
			resetPage() {
				this.currentPage = 1;
				this.pageSize = 10;
				this.total = 0;
			},
			
			submitForm(formName) {
				this.resetPage();
				this.fetchData();
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.time = [];
				this.resetPage();
				this.fetchData();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			forDateCreate(row, column) {
				return row.createTime == null ? "" : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
			},
			forDateRevise(row, column) {
				return row.reviseTime == null ? '' : dayjs(row.reviseTime).format('YYYY-MM-DD HH:mm:ss');
			},
			// sku上下架
			operateSkuStatus(index, row, status) {
				this.$confirm("确认" + (status == 0 ? '上架' : '下架') + ("【" + row.skuName + "】？"))
					.then(_ => {
						this.loading = true;
						operateSkuStatus({
							skuId: row.id,
							status: status
						})
							.then(res => {
								if (res.code == '000000') {
									this.$message({
										message: res.message,
										type: "success"
									});
									this.fetchData();
									this.loading = false;
								} else {
									this.$message({
										message: res.message,
										type: 'error'
									});
									return;
								}
							})
							.catch(err => {
								console.log("err", err);
								this.loading = false;
							});
					});
			},
			// 批量上架
			batchOperateSkuUp() {
				let offFlag = false;
				
				if (this.multipleSelection.length <= 0) {
					this.$message.warning('请选择需要批量上架的记录');
					return;
				}
				this.multipleSelection.forEach(function(row) {
					if (row.status == 1) {
						offFlag = true;
					}
				});
				
				if (offFlag) {
					this.$message.warning('选项中存在已上架的记录');
					return;
				}

				let total = this.multipleSelection.length; // 选中的条数
				let listLenght = this.tableData.length; // 当前列表的条数
				let num = 0; // 计数器

				this.$confirm('确定批量设置已选中' + this.multipleSelection.length + '条记录为【上架】吗？')
					.then(() => {
						let ids = '';
						this.multipleSelection.forEach(row => {
							ids = ids + ',' + row.id;
						})
						// 截取第1个之后所有的字符
						ids = ids.slice(1);
						
						batchOperateSkuStatus({
							ids: ids,
							status: 1
						})
							.then(res => {
								if (res.code == '000000') {
									this.$message({
										message: res.message,
										type: "success"
									});
									this.fetchData();
									this.loading = false;
								} else {
									this.$message({
										message: res.message,
										type: 'error'
									});
									return;
								}
							})
							.catch(err => {
								console.log('err', err);
								this.loading = false;
							})
					}).catch(err => {
						console.log("err", err);
						this.loading = false;
					})
			},
			// 批量下架
			batchOperateSkuOff() {
				let upFlag = false;
				if (this.multipleSelection.length <= 0) {
					this.$message.warning('请选择需要批量下架的记录');
					return;
				}
				
				this.multipleSelection.forEach(function(row) {
					if (row.status == 0) {
						upFlag = true;
					}
				})
				if (upFlag) {
					this.$message.warning('选项中存在已下架的记录');
					return;
				}

				let total = this.multipleSelection.length; // 选中的条数
				let listLenght = this.tableData.length; // 当前列表的条数
				let num = 0;// 计数器

				this.$confirm('确定批量设置已选中' + this.multipleSelection.length + '条记录为【下架】吗？')
					.then(() => {
						let ids = '';
						this.multipleSelection.forEach(row => {
							ids = ids + ',' + row.id;
						})
						// 截取第1个之后所有的字符
						ids = ids.slice(1)
						batchOperateSkuStatus({
							ids: ids,
							status: 0
						})
							.then(res => {
								if (res.code == '000000') {
									this.$message({
										message: res.message,
										type: "success"
									});
									this.fetchData();
									this.loading = false;
								} else {
									this.$message({
										message: res.message,
										type: 'error'
									});
									return;
								}
							})
							.catch(err => {
								console.log('err', err);
								this.loading = false;
							})
					}).catch(err => {
						console.log("err", err);
						this.loading = false;
					})
			},
			deleteRow(index, row) {
				this.$confirm("确认删除" + row.skuName + "？").then(_ => {
					this.loading = true;
					
					delSku({
						id: row.id
					})
						.then(res => {
							if (res.code == '000000') {
								this.$message({
									message: res.message,
									type: "success"
								});
								this.fetchData();
								this.loading = false;
							} else {
								this.$message({
									message: res.message,
									type: 'error'
								});
								return;
							}
						})
						.catch(err => {
							console.log("err", err);
							this.loading = false;
						});
				});
			},
			updatePage(productId) {
				// 跳转到商品编辑页面
				sessionStorage.setItem('productId', productId);
				this.$router.push('/product/productInfoSku/update');
			}
		},
		mounted() {
			this.fetchData();
		},
	}
</script>

<style lang="scss" scoped>
	// 样式请务必加scoped
</style>